<template>
    <div class="permission-container">
        <el-card shadow="never">
            <el-table
                :data="treeData"
                style="width: 100%; margin-bottom: 20px"
                row-key="id"
                border
                default-expand-all
                :tree-props="{ children: 'children' }"
                height="550"
            >
                <el-table-column width="200" prop="id" label="ID" />
                <el-table-column prop="name" label="权限名字" />
                <el-table-column label="权限码">
                    <template #default="{ row }">
                        <el-tag type="primary">{{ row.code }}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reqGetPermission } from '@/api/authority/permission'
import { Tree } from '@/api/authority/permission/type'
import { onMounted, ref } from 'vue'

const treeData = ref<Tree[]>([])
onMounted(() => {
    reqGetPermission().then((res) => {
        treeData.value = res.data
    })
})
</script>

<style lang="less" scoped></style>
